<template>
  <div class="page-container">
    <a-card :bodyStyle="{ padding: '0' }" :bordered="false">
      <a-tabs v-model:active-key="activeTabkey" :destroy-on-hide="true" @change="onTabChange">
        <a-tab-pane key="1" title="车辆基本信息">
          <basicInfo :carInfo="carInfo" />
        </a-tab-pane>
        <a-tab-pane key="2" title="保险信息">
          <insureInfo :carId="carId" :carInfo="carInfo" @updateCarInfo="init" />
        </a-tab-pane>
        <a-tab-pane key="3" title="保养记录">
          <upkeepInfo :carInfo="carInfo" />
        </a-tab-pane>
        <a-tab-pane key="4" title="维修记录">
          <maintenanceInfo />
        </a-tab-pane>
        <a-tab-pane key="5" title="违章记录">
          <ViolationInfo :carId="carId" />
        </a-tab-pane>
        <a-tab-pane key="6" title="年检记录">
          <InspectRecord :carInfo="carInfo" />
        </a-tab-pane>
        <a-tab-pane key="7" title="借调记录">
          <transferInfo />
        </a-tab-pane>
        <a-tab-pane key="8" title="费用信息" v-if="handleShowCost">
          <CostInfo />
        </a-tab-pane>
        <a-tab-pane key="9" title="操作记录" v-if="handleShowLog">
          <OperateLog :id="carId" type="1" />
        </a-tab-pane>
        <a-tab-pane key="10" title="里程更新记录">
          <mileageRecord />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup name="CarManageDetail" lang="ts">
  import basicInfo from './components/basic-info.vue'
  import insureInfo from '@/views/assets/operation/car-insure/detail/components/insure-info.vue'
  import maintenanceInfo from './components/maintenance-info.vue'
  import upkeepInfo from './maintenance-record/index.vue'
  import ViolationInfo from './components/violation-info.vue'
  import CostInfo from './components/cost-info.vue'
  import transferInfo from './components/transfer-info.vue'
  import mileageRecord from './components/mileage-record.vue'
  import InspectRecord from '@/views/assets/operation/car-inspect/record.vue'
  import { getCarDetail } from '@/api/asset/car'
  import dayjs from 'dayjs'
  import { onMounted, ref, watch, computed, provide } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import usePermissionStore from '@/store/modules/permission'

  const { resourcePermission } = usePermissionStore()
  const router = useRouter()
  const route = useRoute()
  const routeQuery = route.query
  const carId = router.currentRoute.value.params.id as string
  const activeTabkey = ref('1')

  const carInfo = ref({})
  provide('originDetail', carInfo)

  // 初始化数据
  const init = () => {
    getCarDetail({ id: carId }).then((res: any) => {
      const result = res.result
      // 车机设备列表
      if (result.vehicleList && result.vehicleList.length > 0) {
        result.vehicleStrList = result.vehicleList.map((e) => {
          return e.vehicleSelectStr
        })
        result.vehicleStrList = result.vehicleStrList.join(' | ')
      }
      result.maintenanceTime = result.maintenanceTime ? dayjs(result.maintenanceTime).format('YYYY-MM-DD') : '-'
      result.currentStatusNameList = result.currentStatusNameList?.map((item) => {
        return {
          type: 'default',
          label: item,
        }
      })
      carInfo.value = result
    })
  }

  // tab 切换事件
  const onTabChange = (key: any) => {
    // 如果切换到车辆基础信息，重新加载车辆信息
    if (key == 1) {
      init()
    }
  }

  const handleShowCost = computed(() => {
    switch (routeQuery.from) {
      case 'car-manage':
        return resourcePermission.includes('svms:asstes:car:car-model.cost')
      case 'car-disposal':
        return resourcePermission.includes('svms:asstes:car:car-disposal.cost')
      case 'car-return':
        return resourcePermission.includes('svms:asstes:car:car-return.cost')
      default:
        return false
    }
  })

  const handleShowLog = computed(() => {
    switch (routeQuery.from) {
      case 'car-manage':
        return resourcePermission.includes('svms:asstes:car:car-model.operaterecords')
      case 'car-disposal':
        return resourcePermission.includes('svms:asstes:car:car-disposal.operaterecords')
      case 'car-return':
        return resourcePermission.includes('svms:asstes:car:car-return.operaterecords')
      default:
        return false
    }
  })

  watch(
    () => routeQuery.tab,
    (newVal) => {
      if (newVal) activeTabkey.value = newVal + ''
    },
    { immediate: true }
  )

  // mounted 调用接口
  onMounted(() => {
    init()
  })
</script>

<style lang="less" scoped></style>
